<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>优惠卷表详情</title>
    <#include "/common/vue_resource.ftl">
    <style>
        table tr th {
            background-color: #f2f6fc;
        }
    </style>
</head>
<body>
<div class="ui-table-div" id="app">
    <table style="width: 80%; margin-left: 10%; " class="layui-table ui-table">
        <tr>
            <th>优惠卷类型</th>
            <th>名称</th>
            <th>使用平台</th>
            <th>数量</th>
            <th>金额</th>
        </tr>
        <tr>
            <td field="typeStr">{{coupon.typeStr}}</td>
            <td field="name">{{coupon.name}}</td>
            <td field="platformStr">{{coupon.platformStr}}</td>
            <td field="count">{{coupon.count}}</td>
            <td field="amount">{{coupon.amount}}元</td>
        </tr>

        <tr>
            <th>每人限领张数</th>
            <th>使用门槛</th>
            <th>开始时间</th>
            <th>结束时间</th>
            <th>使用类型</th>
        </tr>
        <tr>
            <td field="perLimit">{{coupon.perLimit}}</td>
            <td field="minPoint">满{{coupon.minPoint}}可用</td>
            <td field="startTimeStr">{{coupon.startTimeStr}}</td>
            <td field="endTimeStr">{{coupon.endTimeStr}}</td>
            <td field="useTypeStr">{{coupon.useTypeStr}}</td>
        </tr>
        <tr>
            <th>备注</th>
            <th>发行数量</th>
            <th>已使用数量</th>
            <th>领取数量</th>
            <th>可以领取的日期</th>

        </tr>
        <tr>
            <td field="note">{{coupon.note}}</td>
            <td field="publishCount">{{coupon.publishCount}}</td>
            <td field="useCount">{{coupon.useCount}}</td>
            <td field="receiveCount">{{coupon.receiveCount}}</td>
            <td field="enableTimeStr">{{coupon.enableTimeStr}}</td>
        </tr>
        <tr>
            <th>优惠码</th>
            <th>可领取的会员类型</th>
        </tr>
        <tr>
            <td field="code">{{coupon.code}}</td>
            <td field="memberLevel">{{coupon.memberLevel}}</td>
        </tr>
    </table>
    <el-input clearable v-model="params.ordersn" placeholder="订单编号" style="width: 30%; margin-left: 10%; float: left; margin-right: 10%; ">
        <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
    </el-input>
    <el-table style="width: 80%; margin-left: 10%; "
            :data="orderList"
            border
            style="width: 100%">
        <el-table-column
                prop="couponCode"
                label="优惠码"
                width="180">
        </el-table-column>
        <el-table-column
                prop="memberNickname"
                label="会员昵称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="getType"
                label="领取方式">
        </el-table-column>
        <el-table-column
                prop="createTimeStr"
                label="领取时间">
        </el-table-column>
        <el-table-column
                prop="useStatus"
                label="当前状态">
        </el-table-column>
        <el-table-column
                prop="useTime"
                label="使用时间">
        </el-table-column>
        <el-table-column
                prop="orderId"
                label="订单编号">
        </el-table-column>
    </el-table>
    <#--<el-pagination
            style="width: 80%; margin-left: 10%; margin-top: 5%;"
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange">
    </el-pagination>-->
    <div class="layui-row" style="width: 80%; margin-left: 10%; margin-top: 5%;">
        <div class="layui-col-md6">
            <div class="app-table-num"><span class="num">共 {{total}} 条</span></div>
        </div>
        <div class="layui-col-md6 text-right">
<#--            <el-button-group>
                <el-button @click="loadPrev" type="primary" icon="el-icon-arrow-left">上一页</el-button>
                <el-button @click="loadNext" type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>-->
            <el-row>
                <el-button @click="loadPrev" size="medium" round>上一页</el-button>
                <el-button @click="loadNext" size="medium" round>下一页</el-button>
            </el-row>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            coupon: {
                id:'${params.id!}',
                type:'',
                name:'',
                platform:'',
                platformStr: '',
                count:'',
                amount:'',
                perLimit:'',
                minPoint:'',
                startTime:'',
                startTimeStr:'',
                endTime:'',
                endTimeStr:'',
                useType:'',
                useTypeStr:'',
                note:'',
                publishCount:'',
                useCount:'',
                receiveCount:'',
                enableTime:'',
                code:'',
                memberLevel:'',
                isDel:'',
                createId:'',
                createTime:'',
                modifyId:'',
                modifyTime:'',
                categoryRelationList: [],
                productRelationList: [],
                couponHistoryList: []
            },
            orderList: [],
            params: {
                ordersn: '',
                page: 1,
                couponId: '${params.id!}'
            },
            total: 0,
            
        },
        mounted: function () {
            this.loadData();
            this.search();
        },
        methods: {
            loadData: function () {
                var that = this;
                $.http.post("${params.contextPath}/web/smsCoupon/query.json",  {id: '${params.id!}'}).then(function (data) {
                    that.coupon = data.data.record;
                });
            },
            search: function () {
                var that = this;
                $.http.post("${params.contextPath}/web/smsCouponHistory/list.json",  that.params).then(function (data) {
                    console.log(data);
                    that.orderList = data.rows;
                    that.total = data.total;
                });
            },
            loadNext: function () {
                if (this.orderList.length < 20 && this.orderList.length > 0) {
                    return;
                }
                this.params.page = this.params.page + 1;
                this.search();
            },
            loadPrev: function () {
                if (this.params.page <= 1) {
                    return;
                }
                this.params.page = this.params.page - 1;
                this.search();
            },
        }
    })
</script>
</html>
